<template>
    <div class="earth-container">
      <!-- 浮动文本 -->
    
  
      <!-- SVG 图标 -->
      <KXlog ref="svgRef" class="earth-svg" />
    </div>
  </template>
  
  
  <script setup lang="ts">
  import { ref, onMounted, watch, shallowRef, nextTick, computed } from "vue";
  // import EarthIcon from "../../../assets/5_2_1kuang.svg";
  import KXlog from '@/assets/log/KXlog.svg';
  import { applyAnimations, clearAllAnimations } from '../../../animationManager';
  import { act } from "../../../../utils/websocket";
  // svg 元素引用
  const svgRef = ref<InstanceType<typeof KXlog>>();
  
  // 接收属性
  const props = defineProps({
    runEarth: { type: Boolean, default: true },
    speed: { type: Number, default: 0 },
  });
  // const beltSpeed = computed(() => act.speed);
  const Beltrun = computed(() => act.run);
  
  // 初始化
  onMounted(() => {
    const svg = svgRef.value!.$el as SVGSVGElement;
    // 自转动画
    applyAnimations(svg, Beltrun.value);
  });
  
  watch(
    () => Beltrun.value,
    (newVal) => {
      const svg = svgRef.value!.$el as SVGSVGElement;
      newVal ? applyAnimations(svg, true) : clearAllAnimations(svg);
    }
  );
  </script>
  
  <style scoped>
  .earth-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    position: relative; /* 新增定位上下文 */
  }
  
  .earth-svg {
    transform-origin: center;
    display: block;
  }
  /* 浮动文字样式 */
  .belt-speed-label {
    position: absolute;
    top: 65px;       /* 可调整 */
    left: -5px;      /* 可调整 */
    color: rgb(0, 255, 255);
    font-size: 10px;
    transform: rotate(0deg); /* ← 添加旋转 */
    pointer-events: none; /* 不影响 SVG 交互 */
    
    align-items: center;
    z-index: 10;
  }
  </style>
  